<!DOCTYPE html>
<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Spinners</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
    <script src="../../../../dist/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="SpinnerCtrl">>

    <header class="bar bar-header bar-royal">
      <h1 class="title">Spinners</h1>
    </header>

    <ion-content class="has-header padding">

      <table class="table spinner-table" ng-app="ionic">
       <tbody><tr>
         <th>
           <code>default</code>
         </th>
         <td>
           <ion-spinner></ion-spinner>
           <ion-spinner class="spinner-positive"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>android</code>
         </th>
         <td>
           <ion-spinner icon="android"></ion-spinner>
           <ion-spinner icon="android" class="spinner-assertive"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>ios</code>
         </th>
         <td>
           <ion-spinner icon="ios"></ion-spinner>
           <ion-spinner icon="ios" class="spinner-positive"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>ios-small</code>
         </th>
         <td>
           <ion-spinner icon="ios-small"></ion-spinner>
           <ion-spinner icon="ios-small" class="spinner-calm"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>bubbles</code>
         </th>
         <td>
           <ion-spinner icon="bubbles"></ion-spinner>
           <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>circles</code>
         </th>
         <td>
           <ion-spinner icon="circles"></ion-spinner>
           <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>crescent</code>
         </th>
         <td>
           <ion-spinner icon="crescent"></ion-spinner>
           <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>dots</code>
         </th>
         <td>
           <ion-spinner icon="dots"></ion-spinner>
           <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>lines</code>
         </th>
         <td>
           <ion-spinner icon="lines"></ion-spinner>
         </td>
         <td style="background:black">
           <ion-spinner icon="lines" class="spinner-light"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>ripple</code>
         </th>
         <td>
           <ion-spinner icon="ripple"></ion-spinner>
         </td>
         <td style="background: black">
           <ion-spinner icon="ripple" class="spinner-stable"></ion-spinner>
         </td>
       </tr>
       <tr>
         <th>
           <code>spiral</code>
         </th>
         <td>
           <ion-spinner icon="spiral"></ion-spinner>
         </td>
         <td style="background: black">
           <ion-spinner icon="spiral" class="spinner-light"></ion-spinner>
         </td>
       </tr>
      </tbody></table>

    </ion-content>
    <script>
      angular.module('ionic.example', ['ionic'])
      .controller('SpinnerCtrl', function($scope, $ionicConfig) {
        //$ionicConfig.spinner.icon('lines');
      });
    </script>
  </body>
</html>
